<template>
    <div v-empty="!isEmpty" v-loading="loading">
        <flexbox justify="space-between" v-for="(item, index) of list" :key="index" class="list-item" @click="showDetail(item.id)">
            <flexbox-item v-fitText>
                {{ item.name }}
            </flexbox-item>
            <version-flow :flowInfo="item" style="min-width: 460px" />
        </flexbox>
    </div>
</template>

<script lang="ts">
import VersionFlow from './versionFlow.vue';
import { useRouter } from 'vue-router';
import api from '@/api';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        VersionFlow
    },
    props: {
        systemId: {
            type: [String, Number],
            default: ''
        }
    },
    setup(props) {
        const router = useRouter();
        const state = reactive<any>({
            loading: false,
            isEmpty: false,
            list: []
        });
        const showDetail = (id: number) => {
            router.push({
                path: '/version/versionDetail',
                query: {
                    id
                }
            });
        };
        const getList = async () => {
            state.loading = true;
            const query = {
                systemId: props.systemId,
                pageSize: 5,
                pageNum: 1
            };
            const { success, moule } = await api.workbenchModel.findVersionBar(query);
            state.loading = false;
            if (success) {
                state.list = [...moule];
            }
            state.isEmpty = !state.list.length;
        };
        watch(() => props.systemId, getList);
        getList();
        return {
            ...toRefs(state),
            showDetail
        };
    }
});
</script>

<style scoped lang="less">
.list-item {
    padding: 8px 22px 8px 35px;
    background-color: #fff;
    width: 100%;
    cursor: pointer;
    border-bottom: 1px solid #edeff3;
    &:hover {
        background: #fafafa;
        .down-icon {
            display: block;
        }
    }
    // 下载按钮
    .down-icon {
        display: none;
    }
}
</style>